<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<style>
    .custom-class {
        outline: 1px solid red;
    }
</style>
<script>
//<![CDATA[
$(function () {
    $('#grid').w2grid({
        name: 'grid',
        header: 'List of Names',
        // url: {
        //     get: 'grid.json',
        //     save: 's',
        //     remove: 'd'
        // },
        recid: 'userid',
        // dataType: 'HTTP',
        // method: 'POST',
        postData: {
            cmd: 'get-records'
        },
        // limit: 2000,
        // offset: 3690,
        autoLoad: true,
        multiSearch: true,
        show: {
            toolbar: true,
            footer: true,
            header: true,
            // searchSave: false,
            // searchLogic: false,
            emptyRecords: true,
            selectColumn: false,
            expandColumn: false,
            orderColumn: false,
            columnHeaders: true,
            lineNumbers: true,
            toolbarDelete: true,
            toolbarSave: true,
            toolbarAdd: true
        },
        // onRequest1(event) {
        //     getRecords(event.url, event.postData)
        //     event.preventDefault()
        // },
        // onLoad(event) {
        //     this.total = 1
        //     this.records = [
        //         { userid: 1, age: '20', fname: 'Vitali', lname: 'Malinouski' }
        //     ]
        // },
        onSearchSave(event) {
            console.log('save')
        },
        onSearch(event) {
            console.log('search', event.searchData)
        },
        searches: [
            { field: 'userid', label: 'User Id', type: 'int' },
            { field: 'person.fname', label: 'First Name', type: 'text',
                options: {
                    autoAdd: true,
                    openOnFocus: true,
                    items: ['John', 'Jill'],
                }
             },
            // { field: 'person.fname', label: 'First Name', type: 'list',
            //     style: 'width: 100px',
            //     options: {
            //         items: ['John', 'Jill']
            //     }
            // },
            // { field: 'person.lname', label: 'Last Name', type: 'list',
            //     style: 'width: 100px',
            //     options: {
            //         items: ['John', 'Jill']
            //     }
            // },
            { field: 'email', label: 'Email', type: 'color' }
        ],
        columns: [
            { field: 'userid', text: 'ID', size: '80px', sortable: true, hidden: false,
                render(rec, ind, column, data) {
                    return data + 10
                }
            },
            { field: 'person.fname', text: 'First Name', size: '120px', sortable: true, resizable: true,
                info: true,
                editable: { type: 'text' }
            },
            { field: 'person.lname', text: 'Last Name', size: '120px', sortable: true, resizable: true,
                editable: { type: 'text' }
            },
            { field: 'email', text: 'Email', size: '160px', sortable: true, resizable: true,
                editable: { type: 'color' }
            },
            { field: 'text', text: 'Text', size: '100%', sortable: true, resizable: true,
                style: 'text-align: center;',
                editable1: { type: 'text' },
                render1(rec, ind, column, data) {
                    return {
                        html: '<span style="color: red">' + (ind + 10) + '</span>',
                        attrs: 'disabled'
                    }
                }
            }
        ]
    });

    w2ui.grid.load('grid.json', rec => {
        rec.records[1].w2ui = {
            style: {
                4: 'text-align: center; color: red;'
            },
            class: {
                4: 'custom-class'
            }
        }
        // copy records
        for (let i=1; i<10; i++) {
            let recs = w2ui.grid.records.map((rec, ind) => {
                return $.extend(true, {}, rec, { recid: 'rec-'+ (w2ui.grid.records.length + 1 + ind) })
            })
            w2ui.grid.records.push(...recs)
        }
        w2ui.grid.total = w2ui.grid.records.length
        w2ui.grid.refresh()
    })

    function getRecords(url, post) {
        $.ajax({
            url,
            method: 'GET',
            data: { request: JSON.stringify(post) }
        })
        .done((data) => {
            var grid = w2ui.grid
            grid.last.xhr_offset = post.offset
            if (grid.last.xhr_offset === 0) grid.records = []
            if (data.total > grid.records.length) {
                grid.last.xhr_hasMore = true
            } else {
                grid.last.xhr_hasMore = false
            }
            grid.last.pull_more    = false;
            grid.last.pull_refresh = true;
            grid.total = data.total
            grid.records = grid.records.concat(data.records)
            grid.refresh()
        })
    }
});
//]]>
</script>
</head>
<body style="margin: 30px">
    <div id="grid" style="width: 1100px; height: 600px;"></div>
</body>
</html>
